<template>
  <div class="total-panel">
    <span class="total-price">
      总价：<span class="price">￥{{ totalPrice }}</span>
    </span>
  </div>
</template>

<script>
import { mapState } from "vuex";

import { setStorage } from "../../utils/tools";

export default {
  name: "TotalPanel",
  computed: {
    ...mapState(["totalPrice", "totalMount", "cartData"]),
  },
  updated() {
    //在底部总价组件更新的时候
    // console.log(this.totalMount, this.totalPrice, this.cartData);

    // //将修改完的state同步localStorage(除了phoneData)
    setStorage({
      totalMount: this.totalMount,
      totalPrice: this.totalPrice,
      cartData: this.cartData,
    });
  },
};
</script>

<style lang="scss" scoped>
.total-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.44rem;
  padding-right: 0.15rem;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #ddd;

  .total-price {
    float: right;
    line-height: 0.44rem;
    font-size: 0.18rem;
    color: #f50000;
  }
}
</style>